layui.define(['form', 'laydate', 'table'], function (exports) {
    var form = layui.form;
    var laydate = layui.laydate;
    var table = layui.table;
    var resContentMainTable = null;
    // var accessType =${accessType};
    // console.log(accessType);
    //柱状图
    function queryHistogramDate(provId,year,type){
        $.ajax({
            url:Common.ctxPath+"/chart/customer/histogram.json",
            type:"POST",
            data:{provIds:provId,type:type,year:year},
            success:function(res){
                if(res.code==0){
                    initHistogramDate(res)
                }

            }
        });
    }
    //饼状图
    function queryPiechartDate(provId,year,type){
        $.ajax({
            url:Common.ctxPath+"/chart/customer/piechart.json",
            type:"POST",
            data:{provIds:provId,type:type,year:year},
            success:function(res){
                // console.dir(res);
                if(res.code==0){
                    initPiechartDate(res);
                }
            }
        });
    }
    //折线图
    function queryCurveDate(provId,year,type){
        $.ajax({
            url:Common.ctxPath+"/chart/customer/curve.json",
            type:"POST",
            data:{provIds:provId,type:type,year:year},
            success:function(res){
                // console.dir(res);
                if(res.code==0){
                    initCurveDate(res);
                }
            }
        });
    }

    function initHistogramDate(res){
        Highcharts.chart('container', {
            chart: {
                type: 'column'
            },
            title: {
                text: '全国发展用户按月运营分析'
            },
            subtitle: {
                text: '柱状图'
            },
            xAxis: {
                type: 'category'
            },
            yAxis: {
                title: {
                    text: '总用户人数'
                }

            },
            legend: {
                enabled: false
            },
            plotOptions: {
                series: {
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true,
                        format: '{point.y}'
                    }
                }
            },

            tooltip: {
                headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
            },

            series: [
                {
                    name: "",
                    colorByPoint: true,
                    data: res.data.data
                }
            ],
            drilldown: {
                series: res.data.series
            }
        });
    }

    function initPiechartDate(res){
        Highcharts.chart('container1', {
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'
            },
            title: {
                text: '订单用户体量占比'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.2f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.2f}% 共{point.count}人',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        }
                    },
                    showInLegend: true
                }
            },
            series: [{
                name: '省份',
                colorByPoint: true,
                data: res.data
            }]
        });
    }

    function initCurveDate(res){
        Highcharts.chart('container2', {
            chart: {
                type: 'spline'
            },
            title: {
                text: '用户分省走势图'
            },
            subtitle: {
                text: '曲线图'
            },
            xAxis: {
                categories: ['一月', '二月', '三月', '四月', '五月', '六月',
                    '七月', '八月', '九月', '十月', '十一月', '十二月']
            },
            yAxis: {
                title: {
                    text: '人数(个)'
                }
            },
            tooltip: {
                crosshairs: true,
                shared: true
            },
            plotOptions: {
                spline: {
                    marker: {
                        radius: 4,
                        lineColor: '#666666',
                        lineWidth: 1
                    }
                }
            },
            series: res.data
        });
    }

    var view = {
        init: function () {
            this.initSearchForm();
            var year = $("#year").val();
            queryHistogramDate(null,year,null);
            queryPiechartDate(null,year,null);
            queryCurveDate(null,year,null);
        },

        initSearchForm: function () {
            $("#searchFormSearch").on('click', function() {
                var data =  $("#searchForm").serializeJson();
                var provId = data.opt_users;
                var str = "";
                $("input[name='type']:checked").each(function (index, item) {

                    if ($("input[name='type']:checked").length-1==index) {
                        str += $(this).val();
                    } else {
                        str += $(this).val() + ",";
                    }
                });
                var year = $("#year").val();
                if(year==null||year==''){
                    Common.info("请选择年份");
                    return;
                }
                queryHistogramDate(provId,year,str);
                queryPiechartDate(provId,year,str);
                queryCurveDate(provId,year,str);

            });
        }
    }
    exports('index', view);

});